<template>
  <div class="page-style">
    <q-stepper
      contracted
      ref="stepper"
      v-model="step"
      :dark="dark"
      active-color="purple-10"
      animated
      inactive-color="teal-5"
      vertical
      class="main-block-with-cropped stepper-style"
    >
      <q-step
        :dark="dark"
        :done="step > 1"
        :name="1"
        :step="1"
        :title="$q.screen.width > 1000 ? steps[0].text : ''"
        icon="settings"
      >
        <p>
          На следующих шагах вы можете зарегистрироваться на портале
          universo.pro.
        </p>
        <p>
          Нажимая кнопку "Принимаю" вы соглашаетесь с
          <router-link
            to="/privacy_policy"
            target="_blank"
            style="color: rgba(0, 0, 0, 0.4)"
            >Политикой в отношении обработки персональных данных</router-link
          >.
        </p>
        <p>
          После регистрации вы сможете воспользоваться полным функционалом
          портала.
        </p>

        <div class="row justify-end">
          <q-btn flat outlined @click="step++">
            <template v-slot:default>
              <div class="flex no-wrap">
                <span>Принимаю</span>
                <q-icon
                  style="margin-left: 0.25rem"
                  color="purple-10"
                  name="send"
                ></q-icon>
              </div>
            </template>
          </q-btn>
        </div>
      </q-step>
      <q-step
        :done="step > 2"
        :name="2"
        :step="2"
        :title="$q.screen.width > 1000 ? steps[1].text : ''"
        icon="settings"
      >
        <reg-form @success="step++" />
      </q-step>
      <q-step
        :done="step > 3"
        :name="3"
        :step="3"
        :title="$q.screen.width > 1000 ? steps[2].text : ''"
        icon="settings"
      >
        <confirm-form @success="step++" />
      </q-step>
      <q-step
        :name="4"
        :step="4"
        :title="$q.screen.width > 1000 ? steps[3].text : ''"
        icon="settings"
      >
        <p>Вы зарегистрировали вашу учётную запись.</p>
        <p>Для входа воспользуйтесь формой входа на сайт .</p>

        <div v-if="step === 4" class="row justify-end">
          <q-btn flat outlined to="/">
            <template v-slot:default>
              <div class="flex no-wrap">
                <span>Форма входа</span>
                <q-icon
                  style="margin-left: 0.25rem"
                  color="purple-10"
                  name="send"
                ></q-icon>
              </div>
            </template>
          </q-btn>
        </div>
      </q-step>
      <!--     оставил заготовку, чтоб можно было двигаться по шагам регистрации
        произвольно
        <template v-slot:navigation>
          <q-stepper-navigation>
            <q-btn
              :label="step === 4 ? 'Finish' : 'Continue'"
              color="primary"
              @click="$refs.stepper.next()"
            />
            <q-btn
              v-if="step > 1"
              class="q-ml-sm"
              color="primary"
              flat
              label="Back"
              @click="$refs.stepper.previous()"
            />
          </q-stepper-navigation>
        </template> -->
    </q-stepper>
  </div>
</template>
<script>
import { defineAsyncComponent, defineComponent } from "vue";
import { mapState, mapActions, mapWritableState } from "pinia";
import { useRegistradoStore } from "src/stores/registrado";
import { useAuthStore } from "src/stores/auth";
import { useUiStore } from "src/stores/UI";

export default defineComponent({
  name: "RegistradoUzanto",
  components: {
    RegForm: defineAsyncComponent(() => import("../components/RegForm")),
    ConfirmForm: defineAsyncComponent(() =>
      import("../components/ConfirmForm")
    ),
  },

  data() {
    return {
      steps: [
        { step: 1, text: "Соглашение" },
        { step: 2, text: "Данные регистрации" },
        { step: 3, text: "Подтверждение регистрации" },
        { step: 4, text: "Завершение регистрации" },
      ],
      step: 1,
    };
  },

  computed: {
    ...mapState(useAuthStore, ["isLoggedIn"]),
    ...mapState(useAuthStore, { authData: "getAuthData" }),

    ...mapState(useUiStore, ["dark", "isLoading"]),
    ...mapWritableState(useUiStore, ["showLoginForm"]),

    ...mapWritableState(useAuthStore, ["konfirmita", ""]),
    ...mapWritableState(useRegistradoStore, {
      storedEmail: "email",
      storedPassword: "password",
    }),
  },

  watch: {
    authData: function (cur) {
      if (typeof cur === "object") {
        if (Object.prototype.hasOwnProperty.call(cur, "login")) {
          const { login, password } = cur;
          this.storedEmail = login;
          this.storedPassword = password;
        }
      }
    },
    step: function (cur) {
      if (cur === 4)
        // this.$root.$emit('show-login-form');
        this.showLoginForm = true;
    },
    isLoggedIn: function (cur, old) {
      if (cur) {
        // console.error('Watch. Уже залогинен. Переходим на главную страницу');
        this.$router.push("/");
      }
    },

    konfirmita: function (cur, old) {
      if (cur === false) {
        this.step = 3;
      }
    },
  },

  beforeMount() {
    if (this.konfirmita === false) {
      this.step = 3;
      this.konfirmita = null;
    }

    if (this.isLoggedIn) {
      // console.error('beforeMount. Уже залогинен. Переходим на главную страницу');
      this.$router.push("/");
    }
  },

  methods: {
    // setAuthData({login, password}) {
    //   this.$store.commit('registrado/setEmail', login);
    //   this.$store.commit('registrado/setPassword', password);
    // },
  },
  // mounted() {
  //   // Слушаем глобальную шину
  //   // this.$root.$on('authdata', this.setAuthData);
  // },

  // beforeDestroy() {
  //   // Отключаемся от глобальной шины
  //   // this.$root.$off('authdata', this.setAuthData);
  // },
});
</script>
<style scoped>
.stepper-style {
  min-width: 100%;
}
</style>
<style scoped></style>
